<template>
  <div class="workbench-box">
    <div class="workbench">
      <div class="action-box" v-if="workbenchViewList.length > 1">
        <a-dropdown trigger="click">
          <a-button
            type="primary"
            size="small"
            class="action-button"
          >
            <template #icon>
              <cu-icon style="color: #fff" type="org-qiehuan" />
            </template>
            切换视图
          </a-button>
          <template #overlay>
            <a-menu @click="clickWorkView">
              <a-menu-item
                :key="item.key"
                v-for="(item, index) of workbenchViewList"
              >
                <div class="work-view">
                  <div class="work-view-icon">
                    <cu-icon
                      v-if="workbenchView === item.key"
                      class="icon-primary"
                      type="org-icon_right"
                    />
                  </div>
                  <div>{{ item.name }}</div>
                  <div class="work-view-icon setting-icon" @click.stop="settingWorkbench(item.key)">
                    <SettingOutlined v-if="isSuper && ['boss', 'finance'].includes(item.key)"/>
                  </div>
                </div>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>
      <ExpireRemindMessage />
      <div :style="{ paddingBottom: '16px' }">
        <!--  账单  -->
        <a-row :gutter="[10, 10]" :wrap="true">
          <a-col :span="24">
            <FinanceList :workbenchView="workbenchView" :refresh="refreshSetting"/>
          </a-col>
          <a-col
            :span="6"
            style="height: 410px"
            v-if="['boss', 'staff'].includes(workbenchView)"
          >
            <!--   空置预警   -->
            <VacancyWarn />
          </a-col>
          <a-col
            :span="6"
            style="height: 410px"
            v-if="['finance'].includes(workbenchView)"
          >
            <!--   本月收支(财务)   -->
            <MonthIncome />
          </a-col>
          <a-col
            :span="6"
            style="height: 410px"
            v-if="['finance'].includes(workbenchView)"
          >
            <ProgressBill
              billType="bill"
              title="已到期应收应付"
              tips="已到期应收总额(元)"
            />
          </a-col>
          <a-col
            :span="6"
            style="height: 410px"
            v-if="['finance'].includes(workbenchView)"
          >
            <ProgressBill
              billType="arrears"
              title="已逾期欠款"
              tips="已逾期应收欠款总额(元)"
            />
          </a-col>
          <a-col
            :span="6"
            style="height: 410px"
            v-if="['staff'].includes(workbenchView)"
          >
            <!--   房源租售   -->
            <ProgressHouse
              houseType="sale"
              title="房源出租"
              tip="出"
              requestUrl="/workbench/roomRentCount"
            />
          </a-col>
          <a-col
            :span="6"
            style="height: 410px"
            v-if="['staff'].includes(workbenchView)"
          >
            <!--   收房   -->
            <ProgressHouse
              houseType="closed"
              title="收房"
              tip="收"
              requestUrl="/workbench/roomCollectCount"
            />
          </a-col>
          <a-col
            :span="6"
            style="height: 410px"
            v-if="['staff'].includes(workbenchView)"
          >
            <!--   租客续约   -->
            <ProgressHouse
              houseType="continue"
              title="租客续约"
              tip="续"
              requestUrl="/workbench/continueRentRoom"
            />
          </a-col>
          <a-col
            :span="6"
            style="height: 410px"
            v-if="['boss', 'staff'].includes(workbenchView)"
          >
            <!--   房源概况   -->
            <HouseOverview />
          </a-col>
          <a-col
            :span="6"
            style="height: 410px"
            v-if="['boss'].includes(workbenchView)"
          >
            <!--   利率/均价   -->
            <HouseAverPrice />
          </a-col>
          <a-col
            :span="6"
            style="height: 410px"
            v-if="['boss', 'finance'].includes(workbenchView)"
          >
            <!--    电子合同/智能设备     -->
            <div class="col-box">
              <!--   电子合同   -->
              <div class="contract-box">
                <EleContract />
              </div>
              <!--   智能设备   -->
              <div class="equipment-box">
                <SmartDevice />
              </div>
            </div>
          </a-col>
          <a-col
            :span="6"
            style="height: 410px"
            v-if="['boss'].includes(workbenchView)"
          >
            <!--   近6个月走势   -->
            <LettingRate />
          </a-col>
          <a-col
            :span="6"
            style="height: 410px"
            v-if="['finance'].includes(workbenchView)"
          >
            <!--   未来6个月租客/房东到期分析   -->
            <HalfYearAnalyze
              analyzeType="tenant"
              title="未来6个月租客/房东到期分析"
              chartId="halfYearAnalyzeTenant-echart"
              requestUrl="/workbench/rentRoomExpireTrend"
            />
          </a-col>
          <a-col
            :span="6"
            style="height: 410px"
            v-if="['finance'].includes(workbenchView)"
          >
            <!--   未来6个月应收应支分析   -->
            <HalfYearAnalyze
              analyzeType="bill"
              title="未来6个月应收应支分析"
              chartId="halfYearAnalyzeBill-echart"
              requestUrl="/workbench/receivePaymentTrend"
            />
          </a-col>
          <a-col :span="6" style="height: 410px">
            <!--   进行中的审批   -->
            <ApproveList />
          </a-col>
          <a-col :span="6" style="height: 410px">
            <!--   待发通知单   -->
            <InformList />
          </a-col>
          <a-col
            :span="6"
            style="height: 410px"
            v-if="['boss', 'staff'].includes(workbenchView)"
          >
            <!--   招商提醒   -->
            <AttractRemind />
          </a-col>
        </a-row>
      </div>
    </div>

    <!-- 到期提醒  -->
    <ExpireRemind :visible="!!$store.getters.orgInfo.account.expired" />

    <!--  视图设置  -->
    <WorkbenchSetting
      :visible="settingShow"
      :current-key="currentSetting"
      @closeSetting="settingShow = false"
      @saveSuccess="settingSaveSuccess"
    />
  </div>
</template>

<script>
import {
  defineComponent,
  onActivated,
  onMounted,
  onUnmounted,
  onBeforeMount,
  ref,
  computed,
  watch,
  nextTick,
  onDeactivated,
  createVNode,
  reactive,
  toRefs,
} from "vue";
import request from "../../common/utils/request";
import store from "../../store";
import {
  FireFilled,
  CheckSquareOutlined,
  PlusOutlined,
  InsertRowAboveOutlined,
  CaretDownOutlined,
  DownloadOutlined,
  UnorderedListOutlined,
  CloudDownloadOutlined,
  ExclamationCircleOutlined,
  CloseOutlined,
  CopyOutlined,
  SettingOutlined,
} from "@ant-design/icons-vue";
import { Empty, message, Modal, Progress } from "ant-design-vue";
import { useRouter } from "vue-router";
import moment from "moment";
import dayOfYear from "moment/plugin/dayOfYear";
moment.extend(dayOfYear);
import sortList from "./modules/sortList.vue";
import QrcodeVue from "qrcode.vue";
import BLCOMMON from "bl-common-vue3";
import FinanceList from "@/views/home/modules/financeList.vue";
import VacancyWarn from "@/views/home/modules/vacancyWarn.vue";
import HouseOverview from "@/views/home/modules/houseOverview.vue";
import HouseAverPrice from "@/views/home/modules/houseAverPrice.vue";
import EleContract from "@/views/home/modules/eleContract.vue";
import SmartDevice from "@/views/home/modules/smartDevice.vue";
import LettingRate from "@/views/home/modules/lettingRate.vue";
import ApproveList from "@/views/home/modules/approveList.vue";
import InformList from "@/views/home/modules/informList.vue";
import AttractRemind from "@/views/home/modules/attractRemind.vue";
import MonthIncome from "@/views/home/modules/monthIncome.vue";
import ProgressBill from "@/views/home/modules/progressBill.vue";
import HalfYearAnalyze from "@/views/home/modules/halfYearAnalyze.vue";
import ProgressHouse from "@/views/home/modules/progressHouse.vue";

// 切换企业
import ChangeCompany from "../../layouts/commonModules/SettingModal/modules/ChangeCompany.vue";
import ExpireRemind from "@/views/home/modules/ExpireRemind.vue";
import ViewMobile from "@/views/home/modules/ViewMobile.vue";
import ExpireRemindMessage from "@/views/home/modules/ExpireRemindMessage.vue";
import WorkbenchSetting from "@/views/home/components/WorkbenchSetting.vue";

const dateFormat = "YYYY-MM-DD";
export default defineComponent({
  name: "NotVillageIndex",
  components: {
    ViewMobile,
    ExpireRemind,
    CheckSquareOutlined,
    Empty,
    PlusOutlined,
    InsertRowAboveOutlined,
    FireFilled,
    CaretDownOutlined,
    Progress,
    DownloadOutlined,
    UnorderedListOutlined,
    sortList,
    QrcodeVue,
    CloudDownloadOutlined,
    ChangeCompany,
    CloseOutlined,
    CopyOutlined,
    FinanceList,
    VacancyWarn,
    HouseOverview,
    HouseAverPrice,
    EleContract,
    SmartDevice,
    LettingRate,
    ApproveList,
    InformList,
    AttractRemind,
    MonthIncome,
    ProgressBill,
    HalfYearAnalyze,
    ProgressHouse,
    ExpireRemindMessage,
    SettingOutlined,
    WorkbenchSetting,
  },
  setup() {
    const $router = useRouter();
    const state = reactive({
      workbenchView: "", // 当前激活的动作台视图
      workbenchViewList: [],
      settingShow: false,
      currentSetting: '',
      refreshSetting: 0,
    });
    // 超级管理员
    const isSuper = computed(() => store.getters.userInfo.level == 99);


    const activeKey = ref("1");

    onMounted(() => {
      setTimeout(() => {
        nextTick(() => {
          const e = new Event("resize");
          window.dispatchEvent(e);
        });
      }, 200);
    });

    const init = () => {
      const bossIndex = BLCOMMON.utils.getBtnPermission([
        "workbench",
        "auth",
        "bossWorkbench",
      ]);
      const financeIndex = BLCOMMON.utils.getBtnPermission([
        "workbench",
        "auth",
        "financeWorkbench",
      ]);
      let list = [
        {
          key: "staff",
          name: "员工工作台",
        },
      ];
      if (financeIndex) {
        list.unshift({
          key: "finance",
          name: "财务工作台",
        });
      }
      if (bossIndex) {
        list.unshift({
          key: "boss",
          name: "老板工作台",
        });
      }
      state.workbenchViewList = list;
      state.workbenchView = list[0].key;
    };

    init();

    const clickWorkView = (val) => {
      state.workbenchView = val?.key || state.workbenchViewList[0].key;
    };

    const settingWorkbench = (key) => {
      // 设置财务工作台 或者 老板工作台
      state.currentSetting = key;
      state.settingShow = true;
    };

    // 设置工作台保存成功
    const settingSaveSuccess = () => {
      state.settingShow = false;
      state.refreshSetting ++;
    };

    return {
      activeKey,
      ...toRefs(state),
      clickWorkView,
      isSuper,
      settingWorkbench,
      settingSaveSuccess,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(th.column-money, ) {
  text-align: center !important;
}
:deep(td.column-money) {
  text-align: center !important;
}
:deep(th.column-days) {
  text-align: right !important;
}
:deep(td.column-days) {
  text-align: right !important;
}
.workbench-box {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-y: hidden;
}
.workbench {
  padding: 10px;
  height: 100%;
  overflow-y: auto;
  .action-box {
    position: absolute;
    right: 0;
    top: 5px;
    z-index: 1;
  }
}
.tags {
  height: 24px;
  background-color: #fff1c0;
  padding: 5px 10px;
  border-radius: 5px;
  color: #ff9329;
}
.textEllipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 5px 0;
}
:deep(.ant-card-body) {
  padding: 0;
}

.box {
  width: 535px;
  margin-left: 10px;
  margin-bottom: 10px;
  :deep(.ant-table-thead > tr > th) {
    background: #ffff;
  }
  .radio {
    position: absolute;
    top: 18px;
    left: 355px;
  }
  .card-title {
    display: flex;
    justify-content: space-between;
  }
}
.btnClick {
  position: absolute;
  top: 16px;
  left: 180px;
}
:deep(.ant-card-head) {
  padding: 0 12px;
}
.grid {
  cursor: pointer;
}
.linear {
  height: 1px;
  background-color: #f0f2f5;
}
.head {
  margin-bottom: 10px;
  display: flex;
}
:deep(.ant-table-title) {
  padding: 1px 10px;
}
// .conduct {
//   :deep(.ant-card-head) {
//     padding: 0 24px;
//   }
// }
.card-name {
  font-size: 18px;
  font-weight: 600;
}
.remind {
  width: 500px;
  margin-right: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .remind-title {
    font-size: 24px;
    font-weight: 600;
    color: #000;
  }
  .remind-text {
    font-size: 15px;
  }
}
.remind-qrcode {
  width: 105px;
  height: 105px;
  border: 4px solid #000;
  img {
    width: 100%;
    height: 100%;
  }
}
.icon {
  margin-top: 10px;
  font-weight: 700;
  font-size: 28px;
}
.text-phone {
  font-size: 16px;
  font-weight: 700;
}
.phone {
  font-size: 20px;
  font-weight: 700;
}
.col-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .contract-box {
    height: 170px;
    width: 100%;
    margin-bottom: 16px;
  }
  .equipment-box {
    width: 100%;
    flex: 1;
  }
}
.icon-primary {
  color: @primary-color;
}
.work-view {
  display: flex;
  .work-view-icon {
    width: 30px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  //width: 30px;
  //height: 100%;
  //background-color: #faad14;
}
.setting-icon {
  &:hover {
    color: #40a9ff;
  }
}
.action-button {
  padding: 3px 8px;
  height: fit-content!important;
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
}
</style>
